<template>
	<view style="padding-top:20rpx;">
		<view class="funtype marginAuto flex">
			<view class="funtypeeach flex">
				<view class="funcolor" style="background:#BD3124;"></view>
				<view class="funtxt">忙碌</view>
			</view>
			<view class="funtypeeach flex">
				<view class="funcolor" style="background:#fff;border: 1px solid #ccc;"></view>
				<view class="funtxt">空闲</view>
			</view>
			<!-- <view class="funtypeeach flex">
				<view class="funcolor" style="background:#A2EF4D;"></view>
				<view class="funtxt">有单</view>
			</view> -->
		</view>
		<view class="calendar marginAuto">
			<!-- <view class="catime marginAuto flex">
				<view class="catimel" @click="jianmonthfun()">
					<text class="tn-icon-left"></text>
				</view>
				<view class="catimenyr">{{ showyer+'年'+showmonth+'月'+showday+'日' }}</view>
				<view class="catimer" @click="jiamonthfun()">
					<text class="tn-icon-right"></text>
				</view>
			</view> -->
			<view class="scrolllist marginAuto">
				<scroll-view class="scrollmain" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view class="scrollmaineach" 
					:class="timevalac == item.date ? 'aceach':''" 
					v-for="(item,index) in datetime" :key="index"
					@click="datetimefun(item,index)">
						<view>{{ item.date.substr(5) }}</view>
						<view class="week" v-if="item.week == 0">周日</view>
						<view class="week" v-if="item.week == 1">周一</view>
						<view class="week" v-if="item.week == 2">周二</view>
						<view class="week" v-if="item.week == 3">周三</view>
						<view class="week" v-if="item.week == 4">周四</view>
						<view class="week" v-if="item.week == 5">周五</view>
						<view class="week" v-if="item.week == 6">周六</view>
					</view>
				</scroll-view>
			</view>
			<view class="calendxq marginAuto flex" style="padding:20rpx;padding-top:0;margin-top:40rpx;">
				<view class="calendxeach" 
				v-for="(item,index) in calendardata" :key="index"
				:class="item.type == 0 ? '': 'busy'"
				@click="seefun(item,index)"
				>
					<view class="rq">{{ item.time+':00' }}-{{ item.time+1+':00' }}</view>
					<view class="rqxq" v-if="item.type == 1" @click.stop="cancelpbfun(item,index)">
						<view>取消忙碌</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fotbtn marginAuto" @click="allbusy()">一键忙碌</view>
	</view>
</template>

<script>
	import busytime from '../../components/busytime.vue'
	export default {
		components:{
			busytime
		},
		data() {
			return {
				isbusytime:true,
				showyer:'',
				showmonth:'',
				showday:'',
				calendardata:[],
				clickitem:{},
				
				timevalac:'',
				datetime:[],
				
			}
		},
		onLoad() {
			this.getcalxqfun();
		},
		onShow() {
			this.isbusytime = false;
		},
		methods: {
			datetimefun(item,index){
				this.timevalac =item.date;
				this.showgetcallistfun();
			},
			seefun(item,index){  // 查看| ->设置忙碌时间
				this.clickitem = item;
				let sendData = {
					day:this.timevalac,
					time:item.time
				};
				this.apifun.unirequest('/partner/duty/setBusyTime','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast("设置成功");
						this.$set(this.calendardata[index],'type',1)
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			allbusy(){
				let sendData = {
					day:this.timevalac,
					time:''
				};
				this.apifun.unirequest('/partner/duty/setBusyTime','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast("设置成功");
						this.showgetcallistfun();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			cancelpbfun(item,index){  // 取消忙碌
				let sendData = {
					day:this.timevalac,
					time:item.time
				};
				this.apifun.unirequest('/partner/duty/cancel','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$set(this.calendardata[index],'type',0)
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getcalxqfun(){  // 获取日历展示信息
				let datetime = parseInt(new Date().getTime());
				this.timevalac = this.timezl(datetime);
				this.showgetcallistfun();
				this.datetime=[];
				for(var i=0; i< 7; i++){
					let timeitem = datetime+(i*24*60*60*1000);
					this.datetime.push({
						date:this.timezl(timeitem),
						week:new Date(timeitem).getDay()
					})
				}
			},
			timezl(times){
				let date = new Date(times);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				return year+'-'+month+'-'+day;
			},
			showgetcallistfun(){  // 展示时间列表
				let sendData = {
					day:this.timevalac,
				};
				this.apifun.unirequest('/partner/duty/getDutyList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.calendardata = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.funtype{
		width: 600rpx;
		padding: 20rpx 0;
		background:#fff;
		border-radius: 20rpx;
		justify-content: space-around;
		.funtypeeach{
			.funcolor{
				width: 30rpx;
				height: 30rpx;
			}
			.funtxt{
				margin-left:10rpx;
			}
		}
	}
	.calendar{
		width: 690rpx;
		padding: 20rpx 0;
		.catime{
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: space-around;
			.catimel,
			.catimer{
				font-size: 38rpx;
			}
			.catimenyr{
				font-size:34rpx;
				font-weight: 600;
			}
		}
		.calendxq{
			width: 660rpx;
			background: #fff;
			flex-wrap: wrap;
			border-radius: 20rpx;
			border-collapse:collapse;
			.calendxeach{
				width:30%;
				height: 120rpx;
				border: 1px solid #ccc;
				margin:10rpx;
				padding: 10rpx 0;
				color: #333;
				text-align: center;
				.rq{
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: center;
				}
				.rqxq{
					font-size:20rpx;
					margin-top:22rpx;
					text-align: center;
				}
			}
			.alone{
				background:#A2EF4D;
				color: #333;
			}
			.leisure{
				background: #fff;
			}
			.busy{
				background:#BD3124;
				color: #fff;
			}
		}
	}
	.fotbtn{
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		background:#BD3124;
		color: #fff;
		border-radius:50rpx;
		margin-top: 100rpx;
	}
	// 时间
	.scrolllist{
		width: 690rpx;
		.scrollmain {
			white-space: nowrap;
			width: 100%;
			.scrollmaineach {
				display: inline-block;
				margin: 0 20rpx;
				height:90rpx;
				line-height:40rpx;
				color: #666666;
				font-size:28rpx;
				text-align: center;
				.week{
					font-size: 24rpx;
				}
			}
			.aceach{
				color: #FF5014;
				border-bottom: 2px solid #FF5014;
			}
		}
	}
</style>